<template>
  <div class="list">
    <div class="tabs">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="thirdlist" @change="changvalue"/>
        <van-dropdown-item v-model="value2" :options="company"  @change="changvalue"/>
      </van-dropdown-menu>
      
    </div>
    <!-- 多少行后加省略号 -->
    <!-- 目前没加 -->
    <div>
      <div class="da-box">
        <van-list v-model="loading" :finished="finished"  finished-text="没有更多了" @load="onLoad">
          <div class="box">
            <div class="item" v-for="(item,index) in druglist" :key="index"  @click="godetails(item.id,item.name)">
              <img :src="item.cover" alt="">
              <div class="xinxi">
                <p class="p1">{{item.name}}</p>
                <p class="p2">{{item.character}}</p>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list:'',
        value1: -1,
        value2: '0',
        company:[],
        thirdlist: [],
        firstid:'',
        secondid:'',
        thirdid:'',
        companyname:'',
        druglist:[],
        // 分页
        loading: false,
        finished: false,
        page:1,
      }
    },
    created() {
      this.firstid=this.$route.query.firstid
      this.secondid=this.$route.query.secondid
      this.thirdid=this.$route.query.thirdid
      console.log(this.firstid,this.secondid,this.thirdid,123)
      this.getyaolist()
      this.getcompanylist()
      this.getyaopin(1)
    },
    mounted(){
      
    },
    methods: {
      // 药品分类
      getyaolist(){
        this.$get("api/gzh_index.php?action=yaopin_types", {
        
        }).then(res => { 
          this.list = res.data
          for(var a in this.list){
            if(this.list[a].id == this.firstid){
              var secondarr = this.list[a].sons
              for(var b in secondarr){
                if(secondarr[b].id == this.secondid){
                  this.thirdlist = secondarr[b].sons
                  for(var c in this.thirdlist){
                    this.thirdlist[c].text = this.thirdlist[c].name
                    this.thirdlist[c].value = c *= 1;
                    if(this.thirdlist[c].id == this.thirdid){
                      this.value1 = this.thirdlist[c].value
                    }
                  }
                }
              }
              
            }
          }
        }).catch(err => {
          
        });
      },
      // 企业分类
      getcompanylist(){
        this.$get("api/gzh_index.php?action=yaoqi_list", {
        
        }).then(res => { 
          var arr = res.data
          arr.unshift({scqy:"",show_scqy:'生产企业'});
          for(var a in arr){
            arr[a].text = arr[a].show_scqy
            arr[a].value = a
          }
          this.company = arr
        }).catch(err => {
          
        });
      },
      // 改变筛选框
      changvalue(){
        console.log(this.value1,this.value2,'value')
        this.druglist = [];
        this.page = 1;
        this.loading = false;//下拉加载中
        this.finished = false;//下拉结束
        if(this.loading){
            this.onLoad();
        }
        for(let a in this.thirdlist){
          if(this.thirdlist[a].value == this.value1){
            this.thirdid = this.thirdlist[a].id
          }
        }
        for(let a in this.company){
          if(this.company[a].value == this.value2){
            this.companyname = this.company[a].scqy
          }
        }
        this.page = 1
        this.getyaopin(1)
      },
      // 触底请求
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.page+=1
          console.log(123)
          this.getyaopin(this.page)
        }, 500);
      },
      // 获取药品列表
      getyaopin(page){
        this.$get("api/gzh_index.php?action=yaopin_list", {
          page:page,
          limit:20,
          cid:this.thirdid,
          scqy:this.companyname
        }).then(res => { 
          
          this.loading=false
          if(page==1){
            if(res.data.length==0){
              //加载完毕
              this.finished=true
            }else{
              this.druglist = res.data
            }
            if(res.data.length>0&&res.data.length<20){
              //加载完毕
              this.finished=true
            }
          }else{
            if(res.data.length==0){
              this.finished=true
            }else{
              for (const key in res.data) {
                this.druglist.push(res.data[key])
              }
            }
            if(res.data.length>0&&res.data.length<20){
              this.finished=true
            }
              
          }
          
        }).catch(err => {
          
        });
      },
      // 跳转药品详情
      godetails(id,title){
        this.$router.push({name:'look-medicine-details',query: {id:id,title:title}}) 
      }
    },
    // watch: {
    //   // value1(val) {
    //   //   console.log(val,'val')
    //   //   this.value2 = '0';
    //   // }
    // }
    watch: {
      // value1(val){
      //   this.druglist = [];
      //   this.page = 1;
      //   this.loading = false;//下拉加载中
      //   this.finished = false;//下拉结束
      //   if(this.loading){
      //       this.onLoad();
      //   }
      //   // thirdid           companyname
      //   for(let a in this.thirdlist){
      //     if(this.thirdlist[a].value == this.value1){
      //       this.thirdid = this.thirdlist[a].id
      //     }
      //   }
      //   for(let a in this.company){
      //     if(this.company[a].value == this.value2){
      //       this.companyname = this.company[a].scqy
      //     }
      //   }
      //   this.getyaopin(1)
      // },
      // value2(val){

      // }
    }
  }
</script>

<style scoped>
.list{
  width: 100%;
  height: 100%;
}


.tabs{
  width: 100%;
  height: 80px;
  border-bottom: 1PX solid #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size:34px;
  font-family:PingFang SC;
  color:rgba(255,255,255,1);
}




.da-box{
  width: 100%;
  height:calc(100% - 81px);
  overflow: hidden;
  overflow-y: scroll;
  
}

.box{
  width:691px;
  margin: auto;
  /* height: 100%;  */
  
  
  
}
.item{
  width: 100%;
  border-bottom: 1PX solid #EBEBEB;
  display: flex;
  align-items: center;
  padding: 30px 0;
}
.item img{
  width: 160px;
  height: 160px;
  margin-right: 20px;
  background: #ccc;
}
.item .xinxi{
  width: 531px;
}
.p1{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(0,0,0,1);
  line-height:40px;
}
.p2{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:40px;
  margin-top: 10px;
  /* margin-bottom: 35px; */
}
</style>
<style>
.van-dropdown-menu{
  width: 100%;
  height: 80px !important;
}
.van-dropdown-menu__title{
  line-height: 80px !important;
  font-size: 28px !important;
}
.van-cell{
  padding: 25px !important;
  border-bottom: 1PX solid #f7f7f7;
  font-size: 26px !important;
}
.van-dropdown-menu__title::after {
  position: absolute;
  top: 45%;
  right: -0.18333rem;
  margin-top: -0.066667rem;
  border: 0.07rem solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: .8;
  content: '';
}
  .van-list{
      height:100vh;
  }
  .van-ellipsis{
    font-size: 28px !important;
  }
  .van-list__error-text, .van-list__finished-text, .van-list__loading, .van-pull-refresh__head{
    font-size: 28px !important;
  }
</style>
